<template>
  <div>
      <my-menu activeIndex="/course"></my-menu>
      <div class="container clearfix">
        <div class="left-container">
            <img style="width:100%;height:400px" :src="imgPath" alt="">
            <p style="color:#999;line-height:1.5">{{introduction}}</p>
            <div class="read-list">
              <readList :form="form" :pageTotal="page.pageTotal" :page="page.page"></readList>
            </div>
        </div>
        <div class="right-container">
            <my-type></my-type>
        </div>
      </div>
  </div>
</template>

<script>
import myMenu from '../components/menu'
import myType from '../components/type'
import readList from '../components/readList'

export default {
  components: {
    myMenu,
    myType,
    readList
  },
  data () {
    return {
      imgPath: '',
      form: [],
      introduction: '',
      test: '',
      page: {
        page: 1,
        pageSize: 10,
        pageTotal: 1
      }
    }
  },
  methods: {
    getNews (name) {
      this.$store.dispatch('getNews', {
        data: {
          project_id: name,
          page: this.page.page,
          pageSize: this.page.pageSize
        },
        cb: (res) => {
          if (res.data.code === 20000) {
            this.form = res.data.data
            this.page.pageTotal = parseInt(res.data.pageTotal)
            this.page.page = parseInt(res.data.page)
          }
        }
      })
    },
    getProject (id) {
      this.$store.dispatch('getProject', {
        data: {
          id: id
        },
        cb: (res) => {
          console.log('res', res)
          if (res.data.code === 20000) {
            for (let i = 0; i < res.data.data.length; i++) {
              if (res.data.data[i].id == id) {
                this.imgPath = res.data.data[i].img
                this.introduction = res.data.data[i].introduction
              }
            }

          }
        }
      })
    }
  },
  mounted () {
    this.getProject(this.$route.params.name)
    this.getNews(this.$route.params.name)
  }

}
</script>

<style lang="stylus" scoped>
  .container
    width: 1200px
    margin:20px auto;
    background-color rgb(244,244,244)
    .left-container
      height: auto
      width: 100%
      max-width: 800px
      display: inline-block
      float: left
      img
        width 100%
      p
        padding 10px
        font-size 14px
        line-height 20px
        background-color #fff

    .right-container
      float: left
      width: 380px
      z-index: -1
      height: 100%
      padding-bottom: 100px
      padding-left: 20px
      overflow: hidden
</style>
